<template>
  <div class="search-main" :class="{'knowledge-search':isKnowledge}">
    <div class="search-area">
      <div class="search-form" >
        <img src="/images/footer/icon-sousuo.png" class="search-icon" @click="searchMaterial(true)">
        <form action="javascript:return true;"  @click="formClick">
          <input id="searchInput" autofocus @keyup.enter="searchMaterial" v-model="searchName" class="search"
                 placeholder="搜索" type="search" @input="searchMaterial"/>
        </form>
        <span class="del" v-show="searchName.length>0"  @click.stop="delName"></span>
      </div>
      <span class="cancel" @click="cancelSearch">取消</span>
    </div>
    <div id="search" class="search-list" v-if="pageShow">
      <scroll-list :api="apiGetSearch" :key="knowledgeEvent" :is-execution="false" :params="params"
                   :event="knowledgeEvent" ref="scroList" :content-view-height="contentViewHeight" content-area="#search">
        <my-knowledge :search-list="list" slot="list" :search-name="searchName" v-bind="$attrs" v-on="$listeners"
                      :type="2" :event="knowledgeEvent" ref="knowledge"></my-knowledge>
      </scroll-list>
    </div>
    <my-history v-if="isKnowledge && showHistory" :show-history="showHistory" :code="code" :search-tags="searchTags"  @search-material="searchMaterial"  @get-search-tag="getSearchTag"></my-history>
  </div>
</template>
<script>
  import myKnowledge from '@/components/knowledge/knowledgeItem'
  import myHistory from '@/components/knowledge/searchHistory'
  import ScrollList  from "@/components/ajaxList";
  import { apiConstants } from '@/js/utils';
  import bus from '@/common/bus'
  export default {
    inheritAttrs:false,
    data() {
      return {
        list :[],
        searchName:"",
        apiGetSearch:apiConstants.knowledge_searchNavigationContent,
        params:{},
        pageShow:false,
        contentViewHeight:0,
        showHistory:true,
        searchTags:[]
      }
    },
    components: {myKnowledge,myHistory,ScrollList},
    props:{
      isKnowledge: {
        type: Boolean,
        default: false
      }
    },
    mounted(){
      this.contentViewHeight = window.innerHeight;
    },
    created() {
      if(this.isKnowledge){
        this.getSearchTag();
      }
    },
    methods:{
      formClick(){
        $("#searchInput").focus();
      },
      searchMaterial(name){
        this.showHistory = false;
        console.log(typeof name)
        //$("#searchInput").blur();
        bus.$on('clearlist', this.clearListData);
        if(typeof name == 'string'){
          this.searchName = name.trim();
          this.params.searchName = name.trim();
          this.params.offsetNo = 20;
        }
        if(this.searchName!="" ){
          this.pageShow = true;
          this.params = {};
          this.params.searchName = this.searchName.trim();
          this.params.offsetNo = 20;
          let id = "";
          if(this.isKnowledge){
            if(typeof name == 'boolean'){//点击搜索按钮存储搜索历史
              id = code.toString();
              this.showHistory = false;
              let tagArr=  JSON.parse(localStorage.getItem(id)==null||localStorage.getItem(id)==0?"[]":localStorage.getItem(id));
              console.log(tagArr);
              //判断数据是否重复，并把索引变为最前面
              tagArr=[...new Set(tagArr)];
              var index= tagArr.findIndex((v)=>v==this.searchName);
              if(index!=-1){
                tagArr.splice(index+1, 1, ...tagArr.splice(0, 0, tagArr[index]));
              }else{
                tagArr.unshift(this.searchName);
              }
              localStorage.setItem(id,JSON.stringify(tagArr));
              this.searchTags = JSON.parse(localStorage.getItem(id));
            }
          }
          let _this = this;
          _this.$nextTick(()=>{
            console.log("开始进入 getData ");
            //查询已经转存的文件列表
            _this.$refs.knowledge.getTransferContentList();
            _this.$refs.knowledge.getData(id);
          })
        }
      },
      getSearchTag(){
        let id = code.toString();
        this.searchTags = JSON.parse(localStorage.getItem(id)==null||localStorage.getItem(id)==0?"[]":localStorage.getItem(id));
      },
      cancelSearch(){
        if(this.isKnowledge){
          location.href="/knowledgeLibrary"
        }else{
          this.$emit("set-search-status");
        }
      },
      delName(){
        this.searchName="";
        $("#searchInput").focus();
      }
    },
    computed:{
      knowledgeEvent() {
        return `knowledge_${this.searchName}`;
      },
      searchName(){
        return this.searchName;
      },
    },
    watch:{
      searchName(val){
        if("" == val){
          this.showHistory = true;
          this.pageShow = false;
          bus.$on('clearlist', this.clearListData);
          this.$LoadingBar.finish();
        }
      }
    }
  }

</script>
<style lang="scss">
  @import '../styles/libs/minxin.scss';
  .knowledge-search{
    background: #F5F6F8 !important;
    .search-area{
      background: none !important;
    }
    #listcontentdiv {
      background-color: #F5F6F8 !important;
    }
  }
  .search-main{
    width: 100%;
    height: 100%;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    letter-spacing: 1px;
    background: white;
    .search-area{
      display: flex;
      flex-direction: row;
      position: fixed;
      left: 0;
      right: 0;
      background: white;
      z-index: 10;
      .search-form{
        margin-left: 0.3rem;
        margin-top: 0.25rem;
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        align-items: center;
        padding: 0.03rem .25rem;
        height: .68rem;
        background: #FFF;
        box-shadow: 0 0.04rem 0.16rem 0 rgba(61, 107, 127, 0.14);
        border-radius: .34rem;
        form{
          flex-grow:1;
          margin-right: .1rem;
        }
        .del{
          width: .3rem;
          height: .3rem;
          background: url("/images/icon/icon-shanchutupian01.png") 100% 100%;
          background-size: cover;
          z-index: 9999;
        }
        .search{
          font-size: 0.28rem;
          height: .4rem ;
          text-align: center;
          line-height: .4rem;
          color: #999999;
          font-family: PingFangSC-Regular;
          background-color: transparent;
          text-indent: 0.1rem;
          border-width:0rem;
          text-align: left;
          width: 100%;
          border-radius: 0;
          padding: 0;
          -webkit-appearance: none;
        }
        .search-icon{
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: .34rem;
          height: .32rem;
          z-index: 99;
        }
      }
      .cancel{
        font-size: 0.32rem;
        color: #999999;
        height: .66rem;
        line-height: .68rem;
        margin-left: 0.23rem;
        margin-right: 0.4rem;
        margin-top: 0.25rem;
      }
    }

    .search-list{
      top: 1rem;
      height: calc(100% - 1rem);
      position: relative;
      overflow-y: auto;
    }

  }
</style>
